<template>
	<!-- <view :style="{'padding-top': tag == 0?'90rpx':'190rpx'}"> -->
	<view :style="{'padding-top': tag == 0?'90rpx':'120rpx'}">
		<view class="header-tag">
			<view class="header-tag-item" :class="tag==1?'item-color-active':'item-color'" @click="clickTag(1)">商品</view>
			<view class="header-tag-item" :class="tag==0?'item-color-active':'item-color'" @click="clickTag(0)">添加商品</view>
		</view>
		<block v-if="tag == 0">
			<view class="header-title">{{tips}}</view>
			<view class="header-title">{{tips2}}</view>
			<view class="header-image">
				<image src="/static/images/productupload.png" mode=""></image>
			</view>
			<view class="view">
				<view class="view-item">
					<view class="view-item-a">联系人</view>
					<input type="text" v-model="realname" placeholder="请输入联系人姓名" placeholder-style="color:#999999">
				</view>
				<view class="view-item">
					<view class="view-item-a">联系电话</view>
					<input type="text" v-model="mobile" placeholder="请输入联系电话" placeholder-style="color:#999999">
				</view>
			</view>
			<view class="view">
				<view class="view-title">上传商品照片</view>
				<view class="view-upload">
					<!-- 外包装 -->
					<view class="view-image image-margin">
						<image @click="uploadpic(0)" :src="outer_packing_image?outer_packing_image:'/static/images/upload01.png'" mode="aspectFit"></image>
					</view>
					<!-- 内包装 -->
					<view class="view-image image-margin">
						<image @click="uploadpic(1)" :src="inner_packing_image?inner_packing_image:'/static/images/upload02.png'" mode="aspectFit"></image>
					</view>
					<!-- 营业执照 -->
					<view class="view-image image-margin">
						<image @click="uploadpic(2)" :src="business_licence_image?business_licence_image:'/static/images/upload03.png'"
						 mode="aspectFit"></image>
					</view>
					<!-- 其他资料 -->
					<view class="view-image image-margin">
						<image @click="uploadpic(3)" :src="other_image?other_image:'/static/images/upload04.png'" mode="aspectFit"></image>
					</view>
				</view>
			</view>

			<view class="view">
				<view class="view-title">商品说明</view>
				<textarea v-model="instruction" placeholder="请详细填写产地，规格，产品特点" placeholder-style="color:#B9B9B9" />
				</view>
			
			<view class="submit-determine" @click="apply">确定</view>
		</block>
		
		<block v-if="tag == 1">
			<!-- <view class="search">
				<view class="search-view">
					<input type="text" value="" placeholder="请输入商品名称搜索您的商品" placeholder-style="color: #999999"/>
					<text class="iconfont icon-sousuo"></text>
				</view>
			</view> -->
			<view class="noCart" v-if="list.length == 0">
				<view class="pictrue">
					<image src="/static/images/noInvoice.png"></image>
				</view>
			</view>
			
			<view v-else>
				<view class="view" v-for="(item,index) in list" :key="index" @click="goSubmit(item)">
					<view class="view-but">
						<view></view>
						<view v-if="item.status == 1">{{item.status_text}}</view>
						<view v-if="item.status == 2 && item.edit_num != 3">{{item.status_text}},请重新编辑</view>
						<view v-if="item.status == 2 && item.edit_num == 3">审核超过3次，请联系客服</view>
					</view>
					<view class="view-upload">
						<!-- 外包装 -->
						<view class="view-image">
							<image :src="item.outer_packing_image" mode="aspectFit"></image>
						</view>
						<!-- 内包装 -->
						<view class="view-image">
							<image :src="item.inner_packing_image" mode="aspectFit"></image>
						</view>
					</view>
					<view class="view-content">商品说明: {{item.instruction}}</view>
				</view>
			</view>
			
		</block>
	</view>
</template>

<script>
	import { product_apply,product_apply_list } from '@/api/user.js'
	export default {
		data() {
			return {
				realname: '', //姓名
				mobile: '', //手机号码
				outer_packing_image: '', //外包装
				inner_packing_image: '', //内包装
				business_licence_image: '', //营业执照
				other_image: '', //其他资料
				instruction: '', //商品说明
				tag: 1,
				page: 1,
				limit: 100,
				list: [],
				tips: '',
				tips2: '',
				type: 0
			}
		}, 
		onLoad() {
			this.productlist();
		},
		methods: {
			goSubmit(e){
				console.log("点击",e.edit_num)
				
				var that = this;
				if(e.edit_num >= 3){
					
					uni.showToast({
					    title: '审核超过3次，请联系客服',
						icon:"none",
					    duration: 2000
					});
					
				}else{		
				that.tag = 0;
				that.infor(e.id,e.realname,e.mobile,e.outer_packing_image,e.inner_packing_image,e.business_licence_image,e.instruction,e.other_image)
				}
			},
			productlist(){
				let self = this;
				product_apply_list({page:self.page,limit:self.limit}).then(res => {
					console.log('请求成功',res.data.list);
					if(res.data.count == self.limit){
						self.page++
					}
					self.list = res.data.list;
					self.tips = res.data.tips;
					self.tips2 = res.data.tips2;
				}).catch(err => {
					console.log('请求失败',err);
				})
			},
			clickTag(i){
				if(this.tag != i){
					this.tag = i;
				}
				if(i == 1){
					this.productlist();
				}
				this.infor(0,'','','','','','')
			},
			/**
			 * 上传文件
			 * 
			 */
			uploadpic: function(i) {
				let that = this;
				that.$util.uploadImageChange('upload/image', (res) => {
					if(i==0){
						that.outer_packing_image = res.data.url;
					}else if(i==1){
						that.inner_packing_image = res.data.url;
					}else if(i==2){
						that.business_licence_image = res.data.url;
					}else if(i==3){
						that.other_image = res.data.url;
					}
				}, (err) => {
					console.log('上传文件失败',err)
				});
			},
			apply(){
				let self = this;
				if (!self.realname) return self.$util.Tips({
					title: '请输入联系人！'
				});
				if (!self.mobile) return self.$util.Tips({
					title: '请输入联系人电话！'
				});
				if (!(/^1(3|4|5|7|8|9|6)\d{9}$/i.test(self.mobile))) return self.$util.Tips({
					title: '请输入正确的手机号码！'
				});
				if (!self.outer_packing_image) return self.$util.Tips({
					title: '请上传外包装！'
				});
				if (!self.inner_packing_image) return self.$util.Tips({
					title: '请上传内包装！'
				});
				if (!self.business_licence_image) return self.$util.Tips({
					title: '请上传营业执照！'
				});
				if (!self.instruction) return self.$util.Tips({
					title: '请输入商品说明！'
				});
				product_apply({
					realname: self.realname,
					mobile: self.mobile,
					outer_packing_image: self.outer_packing_image,
					inner_packing_image: self.inner_packing_image,
					business_licence_image: self.business_licence_image,
					other_image: self.other_image,
					instruction: self.instruction
				},self.type).then(res => {
					console.log('请求成功',res);
					self.$util.Tips({
						title: res.msg
					});
					self.tag = 1;
					self.page = 1;
					self.list = [];
					self.productlist();
					self.infor(0,'','','','','','')
				}).catch(err => {
					self.$util.Tips({
						title: err
					});
				})
			},
			infor(type,realname,mobile,outer_packing_image,inner_packing_image,business_licence_image,instruction,other_image){
				var that = this;
				console.log(type)
				console.log(realname)
				console.log(mobile)
				that.type = type; // 商品id
				that.realname = realname;//姓名
				that.mobile = mobile;//手机号码
				that.outer_packing_image = outer_packing_image; //外包装
				that.inner_packing_image = inner_packing_image; //内包装
				that.business_licence_image = business_licence_image; //营业执照
				that.instruction = instruction; //商品说明
				that.other_image = other_image; //其他资料
			}
		}
	}
</script>

<style lang="less">
.header-tag{
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
	background-color: #FFFFFF;
	display: flex;
	.header-tag-item{
		width: 50%;
		font-size: 32rpx;
		line-height: 90rpx;
		text-align: center;
	}
	.item-color-active{
		color: #0084f6;
	}
	.item-color{
		color: #000000;
	}
}
.header-title{
	font-size: 34rpx;
	color: #000000;
	font-weight: 900;
	text-align: center;
	line-height: 40rpx;
	background-color: #0082f7;
	letter-spacing: 2rpx;
	padding: 20rpx 0;
}
.header-image{
	width: 100%;
	image{
		display: block;
		width: 100%;
		height: 91rpx;
	}
}
.view{
	background-color: #FFFFFF;
	padding: 0 40rpx;
	margin-bottom: 12rpx;
	.view-item{
		display: flex;
		border-bottom: 2rpx solid #F4F4F4;
		.view-item-a{
			width: 200rpx;
			font-size: 30rpx;
			color: #2D2D2D;
			line-height: 100rpx;
		}
		input{
			width: 400rpx;
			height: 100rpx;
			font-size: 30rpx;
			color: #2D2D2D;
			line-height: 100rpx;
		}
	}
	.view-item:last-child{
		border-bottom: none;
	}
	.view-title{
		font-size: 30rpx;
		color: #2D2D2D;
		line-height: 80rpx;
	}
	.view-upload{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.view-image{
			width: 310rpx;
			height: 180rpx;
			image{
				display: block;
				width: 100%;
				height: 100%;
			}
		}
		.image-margin{
			margin-bottom: 34rpx;
		}
	}
	.view-content{
		font-size: 26rpx;
		line-height: 35rpx;
		color: #666666;
		padding: 20rpx 0;
	}
	.view-but{
		display: flex;
		justify-content: space-between;
		view{
			font-size: 28rpx;
			line-height: 70rpx;
			color: #e93323;
		}
	}
	textarea{
		width: 100%;
		height: 210rpx;
		font-size: 24rpx;
		color: #1B1B1B;
		line-height: 35rpx;
		padding-bottom: 20rpx;
	}
}
.submit-determine{
	width: 604rpx;
	font-size: 30rpx;
	color: #FFFFFF;
	line-height: 84rpx;
	margin: 40rpx auto;
	text-align: center;
	background-color: #dd4134;
	border-radius: 84rpx;
}

.search{
	width: 690rpx;
	position: fixed;
	top: 90rpx;
	left: 30rpx;
	z-index: 99;
	padding: 20rpx 0;
	.search-view{
		display: flex;
		border-radius: 60rpx;
		border: 2rpx solid #3a1ed7;
		input{
			width: 85%;
			height: 56rpx;
			font-size: 20rpx;
			color: #000000;
			line-height: 56rpx;
			padding: 0 50rpx;
		}
		text{
			display: block;
			width: 15%;
			font-size: 50rpx;
			color: #3a1ed7;
			line-height: 56rpx;
		}
	}
}
.noCart {
	margin-top: 171rpx;
	padding-top: 0.1rpx;
	.pictrue {
		width: 414rpx;
		height: 336rpx;
		margin: 78rpx auto 56rpx auto;
		image {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
